<template>
  <div>
    <header class="header">
      <!--      <el-input  placeholder="" v-for="(item,index) in topInputList" :key="index" v-model="item.text" :placeholder="item.title" class="top-input"></el-input>-->
      <!--      <el-date-picker-->
      <!--        class="datePicker"-->
      <!--        v-model="time1"-->
      <!--        type="datetimerange"-->
      <!--        @change="datePicker"-->
      <!--        range-separator="至"-->
      <!--        start-placeholder="开始日期"-->
      <!--        end-placeholder="结束日期">-->
      <!--      </el-date-picker>-->
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column show-overflow-tooltip prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户名"
          width=""
        >
        </el-table-column>
        <el-table-column label="头像" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="imgHeader + scope.row.avatar"
              :preview-src-list="scope.row.avatarList"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="姓名"
          width="150"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip label="身份" width="160">
          <template slot-scope="scope">
            {{ scope.row.user_authority_text }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="mobile"
          label="手机号码"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop=""
          label="今日打卡"
          width=""
        >
          <template slot-scope="scope">
            {{
              scope.row.user_works.length > 0
                ? `${scope.row.user_works[0].go_work_time} - ${
                    scope.row.user_works[0].come_work_time == null ||
                    scope.row.user_works[0].come_work_time == ""
                      ? ""
                      : scope.row.user_works[0].come_work_time
                  }`
                : "暂无记录"
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >考勤</el-button
            >
            <el-button size="mini" @click="yeji(scope.$index, scope.row)"
              >业绩</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="员工考勤"
      width="70%"
      top="50px"
      :visible.sync="outerVisible"
      :before-close="handleClosediaLoding"
      append-to-body
      custom-class="custom"
    >
      <el-dialog
        width="30%"
        title=""
        :visible.sync="innerVisible"
        :before-close="innerClose"
        append-to-body
      >
        <div class="innerLine">上班时间:{{ innerObj.go_work_time }}</div>
        <div class="innerLine">打卡地点:{{ innerObj.go_ship }}</div>
        <div class="innerLine">下班时间:{{ innerObj.come_work_time }}</div>
        <div class="innerLine">打卡地点:{{ innerObj.come_ship }}</div>
      </el-dialog>
      <template>
        <div class="top">
          <div class="leftbutton">
            <el-button size="small" @click="selectDate('prev-year')">
              <span>&lt&lt</span>
            </el-button>
            <el-button size="small" @click="selectDate('prev-month')">
              <span>&lt</span>
            </el-button>
          </div>
          <div class="middlebutton">
            <el-date-picker
              v-model="toptime"
              type="month"
              @change="monthChange"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <div class="rightbutton">
            <el-button size="small" @click="selectDate('next-month')">
              &gt
            </el-button>
            <el-button size="small" @click="selectDate('next-year')">
              &gt&gt
            </el-button>
          </div>
        </div>
      </template>

      <template>
        <div class="Calendarbox">
          <el-calendar ref="calendar" v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <!--                  {{data}}-->
              <div
                class="date-cell"
                :class="data.isSelected ? 'is-selected' : ''"
              >
                <div class="calendar-day">
                  {{ data.day.split("-").slice(2).join("-") }}
                </div>
                <div
                  v-for="(item, index) in kaoqin"
                  :key="index"
                  v-if="data.day.split('-').slice(1, 2) == item.month"
                  @click="calItem(data, item)"
                >
                  <div v-if="data.day.split('-').slice(2) == item.day">
                    上班：{{ item.shang }}
                  </div>
                  <div
                    style="
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    v-if="data.day.split('-').slice(2) == item.day"
                  >
                    上班：{{ item.go_ship }}
                  </div>
                  <div v-if="data.day.split('-').slice(2) == item.day">
                    下班：{{ item.xia }}
                  </div>
                  <div
                    style="
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    v-if="data.day.split('-').slice(2) == item.day"
                  >
                    下班：{{ item.come_ship }}
                  </div>
                </div>
              </div>
            </template>

            <!--                <template #date-cell="{ data }">-->
            <!--                  <div style="display: flex;flex-direction: row;">-->
            <!--                    <div>-->
            <!--                      {{ data.day.split("-").slice(2).join("-") }}-->
            <!--                    </div>-->
            <!--                    <div v-for="i in kaoqin">-->
            <!--                      <div v-if="data.day.split('-').slice(2)==i.day">-->
            <!--                        <div>-->
            <!--                          <span :class="Wcolors.Wcolor(i.state[0])">{{i.state[0]}}</span>-->
            <!--                        </div>-->
            <!--                        <div>-->
            <!--                          <span :class="Wcolors.Wcolor(i.state[1])">{{i.state[1]}}</span>-->
            <!--                        </div>-->
            <!--                      </div>-->
            <!--                    </div>-->
            <!--                  </div>-->
            <!--                </template>-->
          </el-calendar>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      title="员工业绩"
      width="70%"
      :visible.sync="yejiFlag"
      :before-close="handleyejiClose"
    >
      <div class="unlod">
        <span>
          <download-excel
            :fields="exportDataStandard"
            :data="multipleSelection"
            type="xls"
            :name="exportName"
            :defaultValue="exportDefaultValue"
            :fetch="createExportData"
            :before-generate="startDownload"
            :before-finish="finishDownload"
            worksheet="导出信息"
          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <span><i class="el-icon-download"></i>下载明细</span>
          </download-excel>
        </span>
      </div>
      <el-table
        ref="multipleTable"
        :data="yejiObj"
        max-height="550"
        border
        fit
        @selection-change="handleSelectionChangec"
      >
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="time"
          label="日期"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="single_quantity"
          label="单量"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="performance"
          label="绩效(/桶/件)"
          width=""
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="Bad" label="差评" width="">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="esteem"
          label="好评"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="substract"
          label="扣除"
          width=""
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.substract > 0
                ? "-￥" + scope.row.substract
                : scope.row.substract
            }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="绩效结算" width="">
          <template slot-scope="scope">
            <span>{{
              scope.row.settlement > 0
                ? scope.row.settlement
                : "-￥" + -scope.row.settlement
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ticheng"
          label="绩效提成"
          width=""
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { employeeDate, dakajilu } from "../../../utils/api";
export default {
  name: "employeeDate",
  data() {
    return {
      toptime: new Date(),
      token: sessionStorage.getItem("token"),
      imgHeader: this.Global.imgHeader,

      loading: false,
      tableData: [],
      currentPage: 1,
      total: 0,
      limit: 10,
      outerVisible: false,
      innerVisible: false,
      yejiFlag: false,
      value: new Date(),
      month: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),
      userid: -1,
      kaoqin: [],
      innerObj: {},
      yejiObj: {},
      exportName: "导出订单",
      exportDefaultValue: " ",
      multipleSelection: [],
      exportDataStandard: {
        日期: "time",
        本月单量: "single_quantity",
        本月绩效: "performance",
        本月差评: "Bad",
        本月好评: "esteem",
        本月扣除: "substract",
        绩效结算: "settlement",
        绩效提成: "ticheng",
      },
    };
  },
  methods: {
    createExportData() {
      return this.multipleSelection;
    },
    calItem(data, item) {
      this.innerVisible = true;
      console.log(data, item);
      this.innerObj = item;
    },
    innerClose() {
      this.innerVisible = false;
      this.innerObj = {};
    },
    monthChange(e) {
      this.value = new Date(e.getFullYear() + "-" + (e.getMonth() + 1));
    },
    selectDate(e) {
      if (e == "prev-month") {
        // 上个月
        let year = this.value.getFullYear();
        let month = this.value.getMonth() + 1;
        month -= 1;
        if (month <= 0) {
          year -= 1;
          month = 12;
        }
        this.value = new Date(year + "-" + month);
      }
      if (e == "prev-year") {
        // 上年
        let year = this.value.getFullYear();
        let month = this.value.getMonth() + 1;
        this.value = new Date((year -= 1) + "-" + month);
      }
      if (e == "next-month") {
        // 下个月
        let year = this.value.getFullYear();
        let month = this.value.getMonth() + 1;
        month += 1;
        if (month >= 13) {
          year += 1;
          month = 1;
        }
        this.value = new Date(year + "-" + month);
      }
      if (e == "next-year") {
        // 下年
        let year = this.value.getFullYear();
        let month = this.value.getMonth() + 1;
        this.value = new Date((year += 1) + "-" + month);
      }
      this.toptime = this.value;
      this.dakajilu();
    },
    handleSelectionChange() {},
    handleSelectionChangec(e) {
      this.multipleSelection = e;
    },

    handleEdit(index, row) {
      this.userid = row.id;
      this.outerVisible = true;
      this.dakajilu();
    },
    yeji(index, row) {
      this.yejiFlag = true;
      this.yejiObj = row.worker_examines;
      this.exportName = row.name + "-业绩表";
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.employeeDate();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.employeeDate();
    },
    search() {},
    handleClosediaLoding() {
      this.outerVisible = false;
      this.userid = -1;
    },
    handleyejiClose() {
      this.yejiFlag = false;
      this.multipleSelection = [];
    },
    startDownload() {
      if (this.multipleSelection.length <= 0) {
        this.$message("请选择要下载的数据");
      } else {
        this.$message("下载中···");
      }
    },
    finishDownload() {
      this.$message({
        message: "下载成功",
        type: "success",
      });
      this.$refs.multipleTable.clearSelection();
    },

    // 接口
    employeeDate() {
      this.loading = true;
      employeeDate(this.token, this.currentPage, this.limit).then((res) => {
        if (res.data.status) {
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
          this.tableData = res.data.data.data;
          this.total = res.data.data.count;
          console.log(this.tableData);
          this.tableData.forEach((item) => {
            // `user_authority` tinyint(255) DEFAULT '10' COMMENT '3=维修工 4=查勘员 5=送水工  6 商户 10=默认用户 ',
            if (item.user_authority == 10) {
              item.user_authority_text = "普通用户";
            }
            if (item.user_authority == 3) {
              item.user_authority_text = "维修工";
            }
            if (item.user_authority == 4) {
              item.user_authority_text = "查勘员";
            }
            if (item.user_authority == 5) {
              item.user_authority_text = "送水工";
            }
            if (item.user_authority == 6) {
              item.user_authority_text = "商户";
            }
            if (item.worker_examines.length > 0) {
              item.worker_examines.forEach((item2) => {
                item2.settlement = item2.ticheng - item2.substract;
              });
            }
            item.avatarList = [this.imgHeader + item.avatar];
          });
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          let timer = setTimeout(() => {
            this.$message.error("错误，请刷新");
          }, 5000);
          this.$message.error(res.data.msg);
        }
      });
    },
    dakajilu() {
      let month = this.value.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      let time = this.value.getFullYear() + "-" + month;
      dakajilu(this.token, time, this.userid).then((res) => {
        if (res.data.status) {
          this.kaoqin = res.data.data;
          if (this.kaoqin.length > 0) {
            this.kaoqin.forEach((item) => {
              if (item.go_work_time) {
                item.shang = item.go_work_time.split(" ")[1];
              } else {
                item.shang = "";
              }
              if (item.go_work_time) {
                item.xia = item.go_work_time.split(" ")[1];
              } else {
                item.xia = "";
              }
              item.day = item.time.split("-").slice(2).join("-");
              item.month = item.time.split("-").slice(1, 2).join("-");
            });
          }
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.$message.error(res.data.msg);
        }
      });
    },
    //-----接口
  },
  mounted() {
    this.employeeDate();
  },
};
</script>

<style scoped>
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
}
.top-input {
  width: 150px;
  margin-right: 20px;
}
.body {
  margin: 20px 0;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
/deep/.el-table .cell.el-tooltip {
  text-align: center;
}
/deep/.el-calendar .el-calendar__header {
  /*display: none;*/
}
.top {
  display: flex;
  justify-content: space-between;
}
.middlebutton {
  width: 50%;
  text-align: center;
}
/deep/ .el-calendar-table__row .el-calendar-day {
  height: 110px;
}
.date-cell {
  height: auto;
}
.innerLine {
  margin: 10px 0;
}
.unlod {
  text-align: right;
  margin: 10px auto;
  width: 98%;
  cursor: pointer;
  font-size: 14px;
}
</style>
